<template>
  <view class="ve-bottom-box" :style="{ height: cont_height + 'px' }">
    <view class="ve-bottom-box-wrap">
      <view class="ve-bottom-box-wrap-content" ref="bo_box_cont">
        <slot name="default"></slot>
      </view>
    </view>
  </view>
</template>

<script>
  import { nextTick } from 'vue'
  export default {
    name: 've-bottom-box',
    data() {
      return {
        cont_height: 60,
      }
    },
    mounted() {
      nextTick(() => {
        const cont_height = this.$refs.bo_box_cont.$el.clientHeight
        // 最小59px
        cont_height < 59 ? (this.cont_height = 59) : (this.cont_height = cont_height)
      })
    },
  }
</script>

<style lang="scss" scoped>
  .ve-bottom-box {
    position: relative;
    height: 150rpx;

    /* iPhoneX底部安全区定义--start */
    &-wrap {
      padding-bottom: 0;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
      z-index: 90;

      &-content {
        width: 100%;
        padding: 24rpx 32rpx;
        display: flex;

        ::v-deep ve-button {
          flex: 1;

          & + ve-button {
            margin-left: 16rpx;
          }
        }
        ::v-deep .ve-button {
          flex: 1;

          & + .ve-button {
            margin-left: 16rpx;
          }
        }
      }
    }
  }
</style>
